import AppContainer from '@/components/AppContainer';

import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import { queryProjectList } from '@/service/deliver';

import { queryCertificate } from '@/service/globalSetting';
import { Button, Image, Form, Input, Table, Space } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { useNavigate } from 'react-router-dom'
import React from 'react';
import SaveProject from './components/SaveProject';
import { PlusOutlined } from '@ant-design/icons';

const ProjectList = () => {
  let [form] = Form.useForm()
  const history = useNavigate();
  const { tableProps, search, refresh } = useAntdList(queryProjectList, { form })
  const saveProject = useAntdModal({ refresh })
  const columns: ColumnsType<any> = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '项目名称',
    dataIndex: 'name'
  }, {
    title: '图片',
    render(_) {
      return <Image height={80} width={80} src={_.img} />
    }
    // dataIndex: 'img'
  }, {
    title: '创建人',
    dataIndex: 'createdBy'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  }, {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button type='link' onClick={() => saveProject.openModal(_, { title: '编辑项目' })}>编辑</Button>
        <Button type='link' onClick={() => {
          // @ts-ignore
          history.push(`/deliver/project/detail?projectId=${_.id}&belong=${_.belong}`)
        }}>项目详细</Button>
      </Space>
    }
  }
  ]

  return (
    <AppContainer boundary={false} queryFilter={
      <QueryFilter form={form} submit={search.submit} reset={search.reset} >
        <Form.Item label="名称"> <Input /></Form.Item>
        <Form.Item label="类型"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>

      </QueryFilter>
    }
      toolbar={<Toolbar leftRender={<Button icon={<PlusOutlined />} onClick={() => saveProject.openModal({}, { title: '创建项目' })}>创建项目</Button>} />}
    >
      <SaveProject {...saveProject} />
      <Table
        rowKey="id"
        columns={columns}
        {...tableProps}

        onChange={(pagination) => {
          // setPage(pagination.current);
        }}
      // pagination={{ total, current: page, pageSize: 5, simple: true }}
      />

    </AppContainer>)
}
export default ProjectList